Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mjml-group

Package Overview
Dependencies
Maintainers
6
Versions
111
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mjml-group

mjml-group

  • 4.15.3
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
239K
decreased by-60.19%
Maintainers
6
Weekly downloads
 
Created
Source

mj-group

Desktop
easy and quick; responsive

Mobile
easy and quick; responsive

mj-group allows you to prevent columns from stacking on mobile. To do so, wrap the columns inside a mj-group tag, so they'll stay side by side on mobile.

<mjml>
  <mj-body>
    <mj-section>
      <mj-group>
        <mj-column>
          <mj-image width="137px" height="185px" padding="0"    src="https://mjml.io/assets/img/easy-and-quick.png" />
          <mj-text align="center">
            <h2>Easy and quick</h2>
            <p>Write less code, save time and code more efficiently with MJML’s semantic syntax.</p>
          </mj-text>
        </mj-column>
        <mj-column>
          <mj-image width="166px" height="185px" padding="0" src="https://mjml.io/assets/img/responsive.png" />
          <mj-text align="center">
            <h2>Responsive</h2>
            <p>MJML is responsive by design on most-popular email clients, even Outlook.</p>
          </mj-text>
        </mj-column>
      </mj-group>
    </mj-section>
  </mj-body>
</mjml>

try it live

Column inside a group must have a width in percentage, not in pixel You can have both column and group inside a Section iOS 9 Issue: If you use a HTML beautifier for MJML output, iOS9 will render your columns inside a mj-group as stacked. On the output HTML, remove the blank space between the two columns inside a mj-group.
attributeunitdescriptiondefault attributes
widthpercent/pxgroup width(100 / number of non-raw elements in section)%
vertical-alignstringmiddle/top/bottomtop
background-colorstringbackground color for a groupn/a
directionltr / rtlset the display order of direct childrenltr
css-classstringclass name, added to the root HTML element createdn/a

FAQs

Package last updated on 05 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc